<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">  
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>极简博客</title>
    <link rel="stylesheet" href="frame/layui/css/layui.css">
    <link rel="stylesheet" href="frame/static/css/style.css">
    <link rel="stylesheet" type="text/css" href="dateUi/stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="dateUi/stylesheets/print.css" media="print">
    <link rel="stylesheet" type="text/css" href="dateUi/stylesheets/simple-calendar.css">
    <link rel="icon" href="img/theme.png">
    <style>
    .myclass{
    	    height: 240px;
    background-color: #81BA25;
    box-shadow: none;
    color: #fff;
    }
    .btn-mystyle{
    	background:none;
    }
    .iconInfo{
    	font-size:25px !important;
    }
    .left-width{
    	width:250px !important;
    }
    .left-top{
    	    border: 1px solid #ccc;
		    margin: 5px;
		    text-align:center;
		    padding-top:8px;
		    padding-bottom:8px;
		    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
    		border-radius: initial;
    }
    .left-bottom{
    		height:500px;
    		border: 1px solid #ccc;
		    margin: 5px;
		    text-align:center;
		    padding-top:8px;
		    padding-bottom:8px;
		    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
    		border-radius: initial;
    }
    .img-info{
    	text-align:center;
    }
    .myimg{
    	width:120px;
    	height:120px;
    }
    .p-h1{
    	    margin: 0;
    	text-align: center;
    	color: #B5B5B5;
    	font-weight: 600;
    	padding-bottom:10px;
    }
    .info-kk{
    color: #B5B5B5;
    margin-top:10px;
    width:90%;
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
    text-align: center;
    margin:auto;
    }
    .info-nn{
        padding-top:10px;
   	 margin-top: 0;
    text-align: center;
    font-size: 13px;
    color: #999;
    margin:5px;
    }
    .kkry{
    	    font-family: 'Roboto Slab', 'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;
    	    text-align: center;
    	word-break: break-word;
    	font-weight: 400;
        font-size: 1.7em;
        color:#CCC;
        margin:8px;
    }
	 .my-mobile{
    	width:250px !important;
    	top:12px !important;
        height: 575px !important;
    }
    .layui-tab-content{
    height:100% !improtant;
    min-width: 888px;
    overflow: auto;}
    </style>
</head>
<body style="min-width:900px;min-height:600px;overflow:auto;">

<!-- layout admin -->
<div class="layui-layout layui-layout-admin"> <!-- 添加skin-1类可手动修改主题为纯白，添加skin-2类可手动修改主题为蓝白 -->
    <!-- header -->
    <div class="layui-header my-header">
        <a href="test1">
            <!--<img class="my-header-logo" src="" alt="logo">-->
            <div class="my-header-logo">极简博客</div>
        </a>
        <div class="my-header-btn">
            <button class="layui-btn btn-mystyle"><i class="layui-icon iconInfo">&#xe705;</i></button>
        </div>
        <!-- 顶部右侧添加选项卡监听 -->
        <ul class="layui-nav my-header-user-nav" lay-filter="side-top-right">
            <li class="layui-nav-item" style="display:${message}"><a href="markDown.html"> <i class="layui-icon">&#xe642;</i>写博客</a>
           
            </li>
            <li class="layui-nav-item">
                <a class="name" href="javascript:;"><i class="layui-icon">&#xe629;</i>主题</a>
                <dl class="layui-nav-child">
                    <dd data-skin="0"><a href="javascript:;">默认</a></dd>
                    <dd data-skin="1"><a href="javascript:;">纯白</a></dd>
                    <dd data-skin="2"><a href="javascript:;">蓝白</a></dd>
                </dl>
            </li>
            <!-- <li class="layui-nav-item">
                <a class="name" href="javascript:;"><img src="./frame/static/image/code.png" alt="logo"> Admin </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" href-url="demo/login.html"><i class="layui-icon">&#xe621;</i>登录页</a></dd>
                    <dd><a href="javascript:;" href-url="demo/map.html"><i class="layui-icon">&#xe621;</i>图表</a></dd>
                    <dd><a href="/"><i class="layui-icon">&#x1006;</i>退出</a></dd>
                </dl>
            </li> -->
        </ul>

    </div>
    <!-- side -->
    <div class="layui-side my-side left-width">
        <div class="layui-side-scroll left-width">
           <div class="left-top">
           <div class="img-info">
           	<img class="myimg" src="img/myimg.jpg"></img>
           </div>
           <p class="p-h1">俭俭-fdworker</p>
           <div class="info-kk">
           <span>关于我 
           </span>
           </div>
           <div class="info-nn">
           <p>程序员一名，为了督促学习特地写博客，以便回顾与记录，希望多多鼓励。</p>
           </div>
           </div>
           <div class="left-bottom">
            <!-- <p class="kkry">
        目前处于开发阶段，还未发布任何博客，请见谅！
        </p> -->
        <div id = 'calendar'>
      </div>
           </div>
        </div>
    </div>
    <!-- body -->
    <div class="layui-body my-body" style="left:250px!important">
        <div class="layui-tab layui-tab-card my-tab" lay-filter="card" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="1"><span><i class="layui-icon">&#xe638;</i>欢迎页</span></li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe id="iframe" src="demo/welcome.html" frameborder="0" style="background:#EEEEEE;"></iframe>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <!-- <div class="layui-footer my-footer" STYLE="left:250px;">
    </div> -->
</div>

<!-- pay -->
<div class="my-pay-box none">
    <div><img src="./frame/static/image/zfb.png" alt="支付宝"><p>支付宝</p></div>
    <div><img src="./frame/static/image/wx.png" alt="微信"><p>微信</p></div>
</div>

<!-- 右键菜单 -->
<div class="my-dblclick-box none">
    <table class="layui-tab dblclick-tab">
        <tr class="card-refresh">
            <td><i class="layui-icon">&#x1002;</i>刷新当前标签</td>
        </tr>
        <tr class="card-close">
            <td><i class="layui-icon">&#x1006;</i>关闭当前标签</td>
        </tr>
        <tr class="card-close-all">
            <td><i class="layui-icon">&#x1006;</i>关闭所有标签</td>
        </tr>
    </table>
</div>

<script type="text/javascript" src="frame/layui/layui.js"></script>
<script type="text/javascript" src="frame/static/js/vip_comm.js"></script>
<script type="text/javascript" src="dateUi/javascripts/simple-calendar.js"></script>
<script type="text/javascript">
var myCalendar = new SimpleCalendar('#calendar');
layui.use(['layer','vip_nav'], function () {

    // 操作对象
    var layer       = layui.layer
        ,vipNav     = layui.vip_nav
        ,$          = layui.jquery;

     // 顶部左侧菜单生成 [请求地址,过滤ID,是否展开,携带参数]
   // vipNav.top_left('./json/nav_top_left.json','side-top-left',false);
    // 主体菜单生成 [请求地址,过滤ID,是否展开,携带参数]
   /* vipNav.main('./json/nav_main.json','side-main',true);*/ 

    // you code ..
    $(".btn-mystyle").on("click",function(){
    	//捕获页
    	layer.msg('建议使用大些分辨率，小分辨率下影响观感');
    });
});
function openmarkDown(){
	window.open("markDown.html","_blank"); 
}

</script>
</body>
</html>